<template>
  <view>
    <u-modal
      v-model="show"
      z-index="2000"
      :content="content"
      :show-cancel-button="true"
      @confirm="gouser"
    ></u-modal>
    <view class="head">
      <view class="topIcon">
        <!-- <view class="iconfont">&#xe613;</view> -->
        <!-- 		<u-icon class="iconfont" name="email" color="#fff" size="45" @tap="goMessage"></u-icon> -->
        <view>
          <!-- <u-badge class="badge" :is-dot="true" type="error" :offset="[80, 28]"></u-badge> -->
        </view>
      </view>
      <view class="flex bd" style="margin: 15rpx 0 0 40rpx">
        <image
          src="../../static/img/oldboy.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            background-size: cover;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '4' && user.gender == '1'"
        ></image>
        <image
          src="../../static/img/oldgirl.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '4' && user.gender == '0'"
        ></image>
        <image
          src="../../static/img/babyboy.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '1' && user.gender == '1'"
        ></image>
        <image
          src="../../static/img/babygirl.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '1' && user.gender == '0'"
        ></image>
        <image
          src="../../static/img/man.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '3' && user.gender == '1'"
        ></image>
        <image
          src="../../static/img/woman.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '3' && user.gender == '0'"
        ></image>
        <image
          src="../../static/img/woman.png"
          mode="aspectFit"
          style="
            width: 120upx;
            height: 120upx;
            margin-right: 50upx;
            border-radius: 50%;
          "
          class="spc"
          v-show="user.userType == '2' && user.gender == '0'"
        ></image>
        <view>
          <view style="color: #fff; margin-top: -20rpx">
            {{ user.userName || "无" }}

            <!-- 	<text style="display: inline-block;margin: 0 30upx;">{{user.age}}岁</text>
						<text class="tag" v-if="user.userType=='2'" style="display: inline-block;margin-right: 30upx;">{{user.pregnancy}}周</text> -->

            <text
              v-if="user.userType == '1'"
              style="display: inline-block; margin-left: 30upx"
              >{{ monthage }}<span style="margin-right: 20rpx"></span>
            </text>
            <text
              class="tag"
              style="
                display: inline-block;
                margin-left: 30upx;
                margin-right: 10rpx;
              "
            >
              {{ user.userType | userType }}
            </text>
            <text
              class="tag"
              style="
                display: inline-block;
                margin-left: 10upx;
                margin-right: 10rpx;
              "
              v-show="user.userType == 4 || user.chronic == 1"
            >
              慢性病
            </text>
            <text
              class="tag"
              v-if="user.userType == '2'"
              style="display: inline-block; margin-right: 30upx"
              >{{ user.pregnancy }}周</text
            >
          </view>
          <view class="ulist flex" v-if="false">
            <view class="ulist-scroll">
              <view
                class="uitem-box"
                :style="{ width: familyList.length * 100 + 100 + 'upx' }"
              >
                <view
                  class="uitem"
                  v-for="v in familyList"
                  :key="v.id"
                  @tap="swichUser(v)"
                >
                  <image
                    class="userImg"
                    src="../../static/img/cat1.png"
                    mode="aspectFit"
                  ></image>
                  <view style="font-size: 24upx; color: #fff">{{
                    v.appUserInfo.userName
                  }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 200rpx; width: 100vw" class="spc"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      content: "是否切换用户",
      cont: "",
      showAddFamilyType: false,
      user: {},
      birthday: "",
      isCloseLetter: false,
      familyList: [], // 家庭
      monthage: "",
    };
  },
  mounted() {
    this.user = this.config.globalData.user;
    this.user = this.config.globalData.user;
    this.birthday = this.user.birthday;
    this.getFamily();
    this.getSwitchAge();
  },
  filters: {
    userType(inp) {
      let str = "";
      if (inp == 1) str = "儿童";
      if (inp == 2) str = "孕妇";
      if (inp == 3) str = "普通人";
      if (inp == 4) str = "老年人";
      return str;
    },
  },
  computed: {
    // getAge() {
    // 	if (this.birthday != null) {
    // 		var usedTime = Date.parse(new Date()) - Date.parse(new Date(this.birthday));
    // 		var days = Math.floor(usedTime / (24 * 3600 * 1000));
    // 		var time = Math.floor(days / 365) + '岁' + Math.floor(days % 365 / 30) + '月龄'
    // 		return time
    // 	} else {
    // 		return '暂无记录';
    // 	}
    // },
  },
  methods: {
    getSwitchAge() {
      this.config
        .get("/family/switchUserAge", {
          userId: this.user.id,
        })
        .then((res) => {
          this.monthage = res.data.msg;
        });
    },
    getFamily() {
      let self = this;
      this.config.post("/family/getFamilyList", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          res.data.data = res.data.data || [];
          self.familyList = [];
		  let results = res.data.data.filter((v) => {
		  	return v.appUserInfo
		  })
		  results.forEach((it, v) => {
			  console.log(it.appUserInfo.id)
			  console.log(self.user.id);
		  	if (it.appUserInfo.id != self.user.id) {
		  		 self.familyList.push(it);
		  	}
		  });		  
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    goSubInfo() {
      this.showAddFamilyType = true;
    },
    // 从已有成员选择
    goFamilyList() {
      this.showAddFamilyType = false;
      uni.navigateTo({
        url: "/pages/main/pub/select-family",
      });
    },
    // 重新添加家庭成员
    goAddUser() {
      this.showAddFamilyType = false;
      uni.navigateTo({
        url: "/pages/reg/sub-user-info?subType=1",
      });
    },
    // 切换用户
    swichUser(v) {
      this.cont = v;
      this.show = true;
      uni.setStorageSync("yyState", 1);
    },
    gouser() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/family/switchUser", {
          userId: this.cont.appUserInfo.id,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            uni.setStorageSync("subsidiary", res.data.msg);
            self.config.header.subsidiary = res.data.msg;
            self.getFamily();
            self.$parent.$refs.newList.getBallInfo();
            self.$parent.$refs.newList.getListInfo();
            self.$emit("reloadServerInfo", "");
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
//头像部分
.tipsss {
  font-size: 10px;
  color: rgb(238, 238, 238);
  margin-top: 0px;
  width: 610rpx;
  left: 120rpx;
  bottom: 50rpx;
  position: absolute;
}

.head {
  position: fixed;
  width: 100%;
  height: 200rpx;
  background-color: #18c7e1;
  padding-top: 1upx;
  z-index: 1;

  .topIcon {
    position: relative;
    width: 100%;

    .iconfont {
      position: absolute;
      top: 80upx;
      right: 30upx;
      color: #eee;
    }

    .badge {
      position: absolute;
    }
  }

  .tag {
    padding: 0 20upx;
    background-color: #fff;
    color: #18c7e1;
    font-size: 20upx;
    border-radius: 20upx;
  }

  .ulist {
    margin-top: 30upx;

    .ulist-scroll {
      // display: flex;
      max-width: 400rpx;
      height: 95rpx;
      margin-right: 10upx;
      overflow-x: scroll;
      overflow-y: hidden;
      display: inline;
      .uitem-box {
        width: 1000rpx;
        height: 95rpx;
        // width: 900upx;
      }
    }

    .uitem {
      display: inline-block;
      margin-right: 20upx;
      font-size: 20upx;
      text-align: center;

      .userImg {
        width: 60upx;
        height: 60upx;
        margin-right: 30upx;
        margin: 0;
      }
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  //  黑暗模式
  .head {
    background-color: #1b1c1e !important;
  }
  .spc {
    background-color: #1b1c1e !important;
  }
}
</style>